<template>
  <div id="zhfxyp" style="padding-top:10px">
        <div style="float:right">
          <el-date-picker v-model="addyearZHFXYP" type="year" placeholder="选择要添加的年度" value-format="yyyy" format="yyyy"></el-date-picker>
          <el-tooltip class="item" effect="dark" content="添加该年度考核信息" placement="top">
            <el-button type="primary" icon="el-icon-circle-plus-outline" :loading="addloading" @click="addZhfxyp">添加</el-button>
          </el-tooltip>
        </div>
      <div v-if="JSON.stringify(zhfxypList)!=='[]'">
        <div style="padding-left:10px">年度：
          <el-select v-model="zhfxypYear" placeholder="请选择" style="width:120px">
            <el-option
              v-for="(item,index) in zhfxypList"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <el-tooltip class="item" effect="dark" content="删除该年度考核信息" placement="top">
            <el-button type="danger" icon="el-icon-delete" @click="delZhfxyp">删除</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="导出该年度考核信息" placement="top">
            <el-button type="success" icon="el-icon-download" @click="exportword">导出</el-button>
          </el-tooltip>
        </div>
        <mygbjd v-if="zhfxypYear" v-bind:myheight="2" v-bind:personId="personId" v-bind:theyear="zhfxypYear" v-bind:showunitname="true" v-bind:title="' 领导班子情况'" v-bind:objtype="myobjtypes.COMMON_TYPE_KAOHE_BANZI"></mygbjd>
        <mygbjd v-if="zhfxypYear" v-bind:myheight="2" v-bind:personId="personId" v-bind:theyear="zhfxypYear" v-bind:title="personname +' 同志情况'" v-bind:objtype="myobjtypes.COMMON_TYPE_KAOHE_GEREN"></mygbjd>
      </div>
      <div v-else style="line-height:40px;font-size:var(--size14);padding-left:10px">{{loadingText}}</div>
  </div>
</template>
<script>
import * as objtypes from '@/constvalue/commonvalues'
import mygbjd from '@/person/mygbjd.vue'
export default {
  components: {
    mygbjd
  },
  watch: {
    personId: {
      handler (val) {
        this.personId = val
        this.getZhfxypList(val)
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
    personname: {
      handler (val) {
        this.personname = val
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
    unitname: {
      handler (val) {
        this.unitname = val
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  props: {
    personId: '',
    personname: '',
    unitname: ''
  },
  data () {
    return {
      loadingText: '正在加载中...',
      myobjtypes: objtypes,
      zhfxypYear: '',
      addyearZHFXYP: '',
      zhfxypList: [],
      addloading: false
    }
  },
  methods: {
    exportword () {
      window.open(this.$http.defaults.baseURL + 'common/niandikaohe/wordfile/' + this.personId + '/' + this.zhfxypYear)
    },
    getZhfxypList (id, theyear) {
      this.zhfxypList = []
      this.$http
        .get(`/common/niandikaohe/` + id)
        .then(response => {
          this.loadingText = '无年度考核信息'
          this.zhfxypList = response.data
          if (this.zhfxypList && this.zhfxypList.length > 0) {
            if (theyear) {
              this.zhfxypYear = theyear
            } else {
              this.zhfxypYear = this.zhfxypList[this.zhfxypList.length - 1]
            }
          } else {
            this.zhfxypYear = ''
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    addZhfxyp () {
      if (this.addyearZHFXYP && this.addyearZHFXYP !== '') {
        let para = {
          idnumber: this.personId,
          unitname: this.unitname,
          name: this.personname,
          theyear: this.addyearZHFXYP
        }
        let _this = this
        this.addloading = true
        this.$http
          .post(`/common/addniandikaohe/`, para)
          .then(function (response) {
            if (response.data.success === true) {
              _this.zhfxypYear = _this.addyearZHFXYP
              _this.getZhfxypList(_this.personId, _this.addyearZHFXYP)
            } else {
              _this.$message({
                message: response.data.message,
                type: 'error'
              })
            }
            _this.addloading = false
          })
          .catch(function (error) {
            _this.$message({
              message: '添加失败:' + error,
              type: 'error'
            })
            _this.addloading = false
          })
      } else {
        this.$message({
          message: '请选择年度',
          type: 'error'
        })
      }
    },
    delZhfxyp () {
      if (this.zhfxypYear && this.zhfxypYear !== '') {
        this.$confirm('确定要删除该年度考核信息吗?', '提示', {
          type: 'success'
        }).then(() => {
          let para = {
            idnumber: this.personId,
            theyear: this.zhfxypYear
          }
          let _this = this
          this.delloading = true
          this.$http
            .post(`/common/removeniandikaohe/`, para)
            .then(function (response) {
              if (response.data.success === true) {
                _this.getZhfxypList(_this.personId)
                _this.zhfxypYear = ''
                _this.mybanzi = {}
                _this.mygeren = {}
                _this.$message({
                  message: '删除成功',
                  type: 'success'
                })
              } else {
                _this.$message({
                  message: response.data.message,
                  type: 'error'
                })
              }
              _this.delloading = false
            })
            .catch(function (error) {
              _this.$message({
                message: '删除失败:' + error,
                type: 'error'
              })
              _this.delloading = false
            })
        })
      } else {
        this.$message({
          message: '请选择要删除的年度',
          type: 'error'
        })
      }
    }
  },
  mounted () {
  }
}
</script>
<style>
#zhfxyp .el-table td, .el-table th{
  padding:2px 0;
}
#zhfxyp .el-textarea__inner{
  font-size:var(--size18) !important;
  color:#000 !important;
}
</style>
